import React, {memo, useEffect,useState} from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { Table, Tag, Space, Divider, Modal, Spin,Button,message} from 'antd';
import { NavLink } from 'react-router-dom/cjs/react-router-dom';
import { getStudentInfoAction } from '../../store/studentsInfoStore/actionCreators';
import { deleteStudentInfo } from '../../services';
import { filterObj } from './filterConfig';
export default memo(function RoomManage() {
   const {studentInfo} = useSelector(state => ({
    studentInfo: state.getIn(["student", "studentInfo"])
   }), shallowEqual)

  const [isVisable, setIsVisable] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [deleteStudentId, setDeleteStudentId] = useState({});
  const [isReload, setIsReload ] = useState(false);


   const dispatch = useDispatch();
   useEffect(() => {
    // console.log('filterObj',filterObj);
    dispatch(getStudentInfoAction());
   }, [dispatch, studentInfo, isReload])

   const handleDeleteStudentInfo = (text,record) => {
    console.log('delete');
    // console.log(record);
    setDeleteStudentId({student_id:record.student_id});
    setIsVisable(true)
   }

   const onOk = () => {
    setIsLoading(true);
    deleteStudentInfo(deleteStudentId).then(res => {
      setIsLoading(false);
      setIsVisable(false);

      if(res.status === 200)
      {
        message.success(res.message);
        setIsReload(!isReload);
      }else{
        message.error(res.message);
      }
    }).catch(err => {
      setIsLoading(false)
      setIsVisable(false)
      message.error(err)
    })
   }

   const onCancel = () => {
    setIsVisable(false);
   }
    const columns = [
        {
          title: '寝室号',
          dataIndex: 'room_number',
          key: 'room_number',
          filters:filterObj.roomNumberFilter,
          filterMode:'tree',
          filterSearch: true,
          onFilter: (value, record) => record.room_number.startsWith(value)
        },
        {
          title: '姓名',
          dataIndex: 'student_name',
          key: 'student_name',
        },
        {
          title: '学号',
          dataIndex: 'student_number',
          key: 'student_number',
        },

        {
          title: '班级',
          dataIndex: 'class_name',
          key: 'class_name',
          filters:filterObj.classFilter,
          filterMode:'tree',
          filterSearch: true,
          onFilter: (value, record) => record.class_name.startsWith(value)
        },
        {
          title: '学院',
          dataIndex: 'secondery_college',
          key: 'secondery_college',
          filters:filterObj.seconderyCollegeFilter,
          filterMode:'tree',
          filterSearch: true,
          onFilter: (value, record) => record.secondery_college.startsWith(value)
        },
        {
          title: '所在校区',
          dataIndex: 'campus_info',
          key: 'campus_info',
          filters:filterObj.campusInfoFilter,
          filterMode:'tree',
          filterSearch: true,
          onFilter: (value, record) => record.campus_info.startsWith(value)
        },
        
        {
          title: '联系方式',
          key: 'phone_number',
          dataIndex: 'phone_number'
          
        },

        {
          title: '辅导员',
          key: 'counsellor_name',
          dataIndex: 'counsellor_name'
          
        },
        {
          title: '辅导员联系方式',
          key: 'counsellor_number',
          dataIndex: 'counsellor_number'
          
        },
        {
          title:'操作',
          key: 'opration',
          render: (text, record) => {
            // console.log(record);
            return <>
              <Space size="middle">
                  <Button type="link">
                    <NavLink to={{
                      pathname:"/admin/modify_student_info",
                      query: {...record},
                      search: `?student_number=${record.student_number}`
                    }} exact>修改</NavLink>
                  </Button>
                  <Button type='link' onClick={e => handleDeleteStudentInfo(text,record)}>删除</Button>
                </Space>
              
            </>
          }
        }
      ];

  
    const onChange = (pagination, filters, sorter, extra) => {
      console.log('onchange');
      // console.log('params', pagination, filters, sorter, extra);
    };
    return (
        <div>
            <Divider orientation="left">学生宿舍信息页</Divider>
            <Button type='link'><NavLink to="/admin/add_student_info" exact>添加单条学生信息</NavLink></Button>
            <div>
                <Table columns={columns} dataSource={studentInfo} onChange={onChange} size="small" pagination={{defaultPageSize:'8'}}/>
            </div>
            <Modal
              title="提示框"
              visible={isVisable}
              onOk={onOk}
              onCancel={onCancel}
              cancelText="取消"
              okText="确定"
            >
              <p>是否确认删除该条学生信息？</p>
              <Spin spinning={isLoading}/>
            </Modal>
        </div>
    )
})